<template>
<!-- {{ list }} -->
{{ sum }}
<button @click="sumAdd">sum+1</button>
</template>

<script lang="ts" setup>
import { ref, withDefaults} from "vue"
import { type Persons } from "../types"
import useSum from "../hooks/useSum"
// 只接收参数，如果父组件传的参数有问题，会有异常现相
// const props = defineProps(["personList"])

// 接收参数+限制类型
// defineProps<{ list: Persons}>()

// 接收参数+限制类型({ list: Persons}) + 限制必要性({ list?: Persons}) + 限制默认值(withDefaults)
// withDefaults(defineProps<{ list?: Persons}>(),{
//     list:()=> [{ name: "zhangsan", age: 18, id: "123" }]
// })
const { sum, sumAdd } = useSum()


</script>

<style scoped>
</style>